<template>
  <div class="layout">
    <el-container>
      <el-header height="64px">
        <div class="layout-logo">
          <img src="@/assets/images/logo.png" />
        </div>
        <div class="layout-back">
          <ul>
            <li>
              <router-link :to="{ path: '/finish/pages/index' }">
                <i class="le-icon le-icon-arrow-left"></i>返回微页面</router-link
              >
            </li>
            <li>|</li>
            <li>
              <pagetitle v-model="pageInfo.title" ref="pagetitle">
                <span>{{ getPageTitle(pageInfo.title) }}<i class="le-icon le-icon-editor"></i></span>
              </pagetitle>
            </li>
          </ul>
        </div>
        <div class="layout-event">
          <templateSelect v-model="pageInfo">
            <el-button type="primary" style="margin: 0 10px">选择模板</el-button>
          </templateSelect>
          <el-popover ref="popover" placement="bottom" width="148" trigger="click">
            <div class="layout-event-qrcode" style="text-align: center">
              <img src="http://manongyun.oss-cn-hangzhou.aliyuncs.com/Qmpaas/le-qrcode.png" width="100" height="100" />
              <p>手机扫描二维码预览</p>
            </div>
          </el-popover>
          <el-button type="text" v-popover:popover style="margin: 0 10px">预览</el-button>
          <popconfirm @confirm="handlePageSetting" title="确认设置该微页面为首页？">
            <el-button type="text">设为首页</el-button>
          </popconfirm>
          <el-button type="text" @click="handlePageSave" style="margin: 0 10px">保存</el-button>
          <promotion v-model="pageInfo">
            <el-button type="text">推广</el-button>
          </promotion>
        </div>
      </el-header>
      <el-main>
        <div class="layout-tool">
          <el-scrollbar ref="scrollbar" :style="scrollHeight">
            <!-- 左侧功能栏-开始 -->
            <el-collapse :value="['basics', 'advanced', 'sales', 'other', 'marketing']">
              <el-collapse-item :name="index" v-for="(mounted, index) in panels" :key="index">
                <template slot="title">
                  <i class="le-icon le-icon-arrow"></i>
                  <span>{{ mounted.title }}</span>
                </template>
                <ul class="fm-collapse-tool">
                  <li
                    class="widget"
                    v-for="(item, index) in mounted.children"
                    :key="index"
                    :draggable="true"
                    @dragstart="dragStart(item)"
                    @dragend="dragEnd"
                    data-type="module"
                  >
                    <i class="le-icon" :class="item.icon"></i>
                    <span>{{ item.title }}</span>
                  </li>
                  <div class="clears"></div>
                </ul>
              </el-collapse-item>
            </el-collapse>
            <!-- 左侧功能栏-结束 -->
          </el-scrollbar>
        </div>
        <div class="layout-body">
          <el-scrollbar :style="scrollHeight">
            <div class="layout-phone">
              <div class="layout-phone-header" @click="handlePageName">
                <div class="layout-phone-title">
                  {{ pageInfo.name || '微页面' }}
                </div>
                <div class="layout-phone-header-active" v-if="index == -1"></div>
              </div>
              <div class="layout-phone-body">
                <router-view />
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="layout-attribute" v-if="!is_lock">
          <el-scrollbar :style="scrollHeight" v-if="index !== -1">
            <component :is="modules[attribute].attribute" v-if="modules[attribute]"></component>
          </el-scrollbar>
          <el-scrollbar :style="scrollHeight" v-if="index == -1">
            <pageAttribute v-model="pageInfo.name"></pageAttribute>
          </el-scrollbar>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import panels from '../lib/panels.js';
import modules from '../pages/package/modules';
import popconfirm from '@/components/popconfirm.vue';
import promotion from '@/components/promotion';
import pagetitle from '@/components/pagetitle';
import templateSelect from '@/components/templateSelect';
import pageAttribute from '@/pages/package/modules/page/attribute';

export default {
  components: {
    popconfirm,
    promotion,
    pagetitle,
    pageAttribute,
    templateSelect
  },
  data() {
    return {
      panels: panels,
      modules: modules,
      fullHeight: document.documentElement.clientHeight
    };
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    let that = this;
    //监听页面大小
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.fullHeight = window.fullHeight;
      })();
    };
    that.$heshop
      .qrcode('post', {
        page: 'pages/index/index'
      })
      .then(() => {
      })
      .catch(err => {
        that.$message.error(err.data.message);
      });
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    scrollHeight() {
      return {
        height: parseInt(this.fullHeight) - 65 + 'px'
      };
    },
    pageInfo() {
      return this.$store.state.finish.pageInfo;
    },
    index() {
      return this.$store.state.finish.index;
    },
    attribute() {
      return this.$store.getters.attribute;
    },
    is_attribute() {
      if (this.$store.state.finish.pages.length > 0) {
        return true;
      } else {
        return false;
      }
    },
    is_lock() {
      return this.$store.state.finish.is_lock;
    }
  },
  methods: {
    /**
     * 处理名称
     * @param  {[type]} value [description]
     * @return {[type]}       [description]
     */
    getPageTitle(value) {
      if (value && Number(value.length) == 13) {
        return '默认微页面' + this.pageInfo.id;
      } else {
        return value || '默认微页面';
      }
    },
    /**
     * [handlePageName description]
     * @return {[type]} [description]
     */
    handlePageName() {
      this.$store.commit('finish/setIndex', -1);
    },
    /**
     * 执行页面保存操作
     * @return {[type]} [description]
     */
    handlePageSave() {
      const loading = this.$loading({
        lock: true,
        text: '保存中……',
        spinner: 'el-icon-loading'
      });
      if (this.pageInfo.title === '默认微页') {
        return;
      }
      this.pageInfo.content = JSON.stringify(this.$store.state.finish.pages);
      this.$heshop
        .pages('put', this.pageInfo)
        .then(() => {
          loading.close();
          this.$message({
            title: '成功',
            message: '保存成功',
            type: 'success'
          });
        })
        .catch(error => {
          console.error('错误信息', error);
        });
    },
    /**
     * 设置为首页
     * @return {[type]} [description]
     */
    handlePageSetting() {
      let id = this.$route.query.id;
      this.$heshop
        .pages('put', { id: id, behavior: 'setting' }, this.page)
        .then(data => {
          this.$message({
            title: '设置成功',
            message: '成功设置该微页面为首页',
            type: 'success'
          });
        })
        .catch(error => {
          console.error('错误信息', error);
        });
    },
    /**
     * 拖拽拿起事件
     * sort 排序  drag 拖拽
     * @param  {[type]} $event [description]
     * @return {[type]}        [description]
     */
    dragStart($event) {
      this.$store.commit('finish/setComs', $event);
    },
    /**
     * 拖拽放下事件
     * @param  {[type]} $event [description]
     * @return {[type]}        [description]
     */
    dragEnd($event) {
      this.$store.commit('finish/setComs', '');
      $event.preventDefault();
    }
  }
};
</script>

<style lang="less" scoped>
@import './layout.less';
</style>
